<template>
	<view class="content">
		
		<view class="topBox">
			<view class="titleBox" :class=" index == 1 ? 'borders':'' " v-for="(item,index) in topList" :key="index" @tap="topThis(index)">
				<view class="titleName" :class=" item.showThis == true ? 'thisTitle':'' ">{{item.name}}</view>
				<view class="titleIcon" :class=" item.showThis == true ? 'titleIcons':'' "></view>
			</view>
		</view>
		
		<view class="rowList" v-for="(item,index) in ticketList" :key="index">
			<view class="leftBox">
				<view class="price fontSemiBold" :class=" topList[2].showThis ? 'color_grey':'' ">{{item.price}}</view>
				<view class="priceName fontSize12" :class=" topList[2].showThis ? 'color_grey':'' ">优惠券(元)</view>
			</view>
			<view class="centerBox">
				<view class="centerTop" :class=" topList[2].showThis ? 'color_grey':'' ">{{item.name}}</view>
				<view class="centerTime fontSize12" :class=" topList[2].showThis ? 'color_grey':'' ">有效期:{{item.time}}</view>
				<view class="centerBottom fontSize12" :class=" topList[2].showThis ? 'color_grey':'' " v-show=" item.man_price == 0 ">无门槛使用</view>
				<view class="centerBottom fontSize12" :class=" topList[2].showThis ? 'color_grey':'' " v-show=" item.man_price !== 0 ">满{{item.man_price}}元减{{item.price}}元券</view>
			</view>
			<view class="fontSize13" :class=" item.use ? 'rightBox':'rightBoxUse' " v-show=" topList[2].showThis == false " @tap="goIndex">{{item.use ? '去使用':'已使用'}}</view>
			<view class="fontSize13 rightBoxUse" v-show=" topList[2].showThis == true " @tap="goIndex">已过期</view>
		</view>
		
		<view class="noneBox" v-show="ticketList.length==0">
			<image class="noneImage" src="/pages_mine/pages/static/ticket/none.png" mode=""></image>
			<view class="names">暂无优惠券~</view>
		</view>
		
		
		
	</view>
</template>
<style>
	.content .noneBox{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;margin-top: 100upx;}
	.content .noneBox .noneImage{width:400upx;height:260upx;}
	.content .noneBox .names{width: 100%;color:#B3B3B3;margin-top: 0;text-align: center;}
	
	.content{width: 100%;min-height: 100vh;background: rgb(245,245,249);padding-top: 2upx;}
	.content .topBox{width: 90%;height:100upx;margin:40upx 0;margin-left: 5%;border-radius: 100upx;background: white;display: flex;justify-content: center;align-items: center;}
	.content .topBox .titleBox{width: 33.3%;text-align: center;font-size: 32upx;color:#999999;}
	.content .topBox .borders{border-left:2upx solid #EEEEEE;border-right:2upx solid #EEEEEE}
	.content .topBox .thisTitle{color:#262626;font-weight: bold;}
	.content .topBox .titleIcon{width:20%;margin-left: 40%;margin-top: 10upx;height:4upx;background: white;}
	.content .topBox .titleIcons{width:20%;margin-left: 40%;margin-top: 10upx;height:4upx;background: #DC582A;}
	.content .rowList{width: 90%;padding:5%;margin-left: 5%;display: flex;justify-content: center;border-radius: 10upx;margin-bottom: 40upx;background: white;}
	.content .rowList .leftBox{width: 30%;text-align: center;}
	.content .rowList .leftBox .price{height:120upx;line-height: 120upx;color:#DC582A;font-size: 100upx;}
	.content .rowList .leftBox .priceName{color:#DC582A;}
	.content .rowList .centerBox{width: 42.5%;margin-left: 2.5%;text-align: left;}
	.content .rowList .centerBox .centerTop{font-weight: bold;color:#262626;font-size: 36upx;margin-top: 10upx;}
	.content .rowList .centerBox .centerTime{font-weight: bold;color:#999999;margin:10upx 0 20upx 0}
	.content .rowList .centerBox .centerBottom{color:#999999}
	.content .rowList .rightBox{width: 25%;height:60upx;line-height: 60upx;margin-top:50upx;border-radius: 100upx;text-align: center;color:white;background: #DC582A;}
	.content .rowList .rightBoxUse{width: 25%;height:60upx;line-height: 60upx;margin-top:50upx;border-radius: 100upx;text-align: center;color:#999999;background: #EEEEEE;}
	.content .color_grey{color:#999999 !important}
</style>
<script>
	import Share from '@/common/wx_share.js'
	export default {
		data() {
			return {
				share:{
					title:"",
					path:'/pages/tabbar/mine',
					imageUrl:'',
					desc:'',
					content:''
				},
				topList:[
					{name:"未使用",showThis:true},
					{name:"已使用",showThis:false},
					{name:"已过期",showThis:false},
				],
				ticketList:[
					// {id:1,price:1,time:"2021.12.30",name:"商品优惠券",use:false},
					// {id:1,price:12,time:"2021.12.30",name:"平台优惠券",use:false},
					// {id:1,price:123,time:"2021.12.30",name:"平台优惠券",use:true},
					// {id:1,price:321,time:"2021.12.30",name:"商品优惠券",use:true},
				],
				pages:1,

				
			}
		},
		onLoad(){
			this.AjaxLoad()
		},
		onReachBottom(){
			this.pages++
			this.AjaxLoad()
		},
		methods: {
			AjaxLoad(){
				var ticketList = []
				var filter = ""
				if( this.topList[0].showThis == true ){
					filter = 1
				}else if( this.topList[1].showThis == true ){
					filter = 3
				}else if( this.topList[2].showThis == true ){
					filter = 2
				}
				let param={
					token:this._$userToken("userInfo").token,
					// token:"61a37939e67454853f97d91b33bed0279fb36d0d",
					page:this.pages,
					filter:filter
				};
				this._$InitRequest.request("MemberCoupon/couponlst", param).then(res => {
					res.data.couponarr.forEach( (item) =>{
						let use = false
						if( item.filter == 1 )use = true
						ticketList.push({
							id:item.id,
							name:item.coupon_name,
							man_price:item.man_price,
							time:item.end_time,
							price:item.dec_price,
							use:use
						})
					})
					for (var i = 0; i < ticketList.length; i++){this.ticketList.push( ticketList[i] )}
				},error=>{})
			},
			topThis(e){
				for (var i = 0; i < this.topList.length; i++) {
					this.topList[i].showThis = false
				}
				this.topList[e].showThis = true
				this.pages = 1
				this.ticketList = []
				this.AjaxLoad()
			},
			goIndex(){
				if( this.topList[0].showThis == true ){
					uni.switchTab({
						url:"/pages/tabbar/index"
					})
				}else if( this.topList[1].showThis == true ){
					uni.showToast({title:"已使用优惠券",icon:"none"})
				}else if( this.topList[2].showThis == true ){
					uni.showToast({title:"优惠券已过期",icon:"none"})
				}
			},
			
			
			
		}
	}
</script>
<style lang="scss" scoped>
/deep/ .uni-input-input {font-size:32upx}
/deep/ .uni-radio-input-checked{background-color:rgb(110,43,34) !important;border:2upx solid white !important}
.content .html{
  ::v-deep {
    img {
      width: 100%;
    }
  }
}
</style>